import classnames from 'classnames';
import Icon from '@/components/Icon';
import styles from './index.module.scss';
import { Result } from '@/store/reducer/search';
import { Image } from 'antd-mobile';
import defaultImgSrc from '@/assets/none.png';
import { ArticleResult } from '@/store/reducer/article';
import { useHistory } from 'react-router-dom';
interface ArticleItemProps {
  data: Result | ArticleResult;
}
export default function ArticleItem({ data }: ArticleItemProps) {
  const history = useHistory();
  //传入的数据解构
  const { type, images } = data.cover;
  return (
    <div className={styles.root} onClick={() => history.push('/article/' + data.art_id)}>
      {/* t3: 三图结构 none-mt没有图片结构  */}
      <div
        className={classnames('article-content', {
          t3: type === 3,
          'none-mt': type === 0,
        })}
      >
        <h3>{data.title}</h3>
        {type !== 0 && (
          <div className="article-imgs">
            {images?.map((item: string, index: number) => {
              return (
                <div key={index} className="article-img-wrapper">
                  {/* <img src={item} alt="" /> */}
                  <Image src={item} alt="" fit="cover" lazy fallback={<img src={defaultImgSrc} />}></Image>
                </div>
              );
            })}
          </div>
        )}
      </div>
      <div className={classnames('article-info', type === 0 ? 'none-mt' : '')}>
        <span>{data.aut_name}</span>
        <span>{data.comm_count}评论</span>
        <span>{data.pubdate}</span>
      </div>
    </div>
  );
}
